import { memo } from 'react';
import homeBg from '@/assets/home-bg.png';
import { Typography } from 'antd';
import { useNavigate } from 'react-router-dom';
import { CourseList } from '@/api/api';

const { Paragraph } = Typography;

interface ClassroomItemProps {
  classroomData: CourseList;
}
// 课程卡片组件
const ClassroomItem = ({ classroomData }: ClassroomItemProps) => {
  const navigate = useNavigate();
  return (
    <div
      className="cursor-pointer hover:scale-105 transition-all duration-300"
      onClick={() => {
        navigate(`/classroom/${classroomData.id}`);
      }}
    >
      <div className="w-full aspect-video">
        <img
          className="w-full h-full object-cover"
          src={classroomData.image || homeBg}
          alt=""
        />
      </div>
      <div className="py-3 text-xl">
        <Paragraph ellipsis={{ rows: 2 }}>{classroomData.name}</Paragraph>
      </div>
    </div>
  );
};

export default memo(ClassroomItem);
